<template>
	<div class="vtao-login relative h-full">
		<div class="container relative h-full">
			<div class="v-left h-full-box relative">
				<div class="vtao-app-logo">
					<!-- <img src="~@/assets/images/logo.png" alt="" /> -->
					<div class="logo-title">Vtao Admin</div>
				</div>
				<div class="my-auto">
					<img src="~@/assets/images/login-box-bg.png" alt="" />
					<div class="text-white">智能商品上货平台</div>
				</div>
			</div>
			<div class="v-right h-full-box relative">
				<div class="login_box">
					<div class="title">
						<h3>{{ data.title }}</h3>
					</div>
					<el-form ref="loginForm" :model="loginInfo" :rules="data.rules" class="demo-ruleForm" :size="formSize">
						<el-form-item prop="username" v-if="!data.isLogin">
							<el-input v-model="loginInfo.username" placeholder="请输入昵称" />
						</el-form-item>
						<el-form-item prop="account">
							<el-input v-model="loginInfo.account" placeholder="请输入手机号/邮箱" />
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="loginInfo.password" type="password" placeholder="请输入密码" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitForm(loginForm)">{{ data.loginText }}</el-button>
							<el-button @click="resetForm(loginForm)">重置</el-button>
						</el-form-item>
					</el-form>
					<div class="tab-login" @click="switchPage">{{ data.tabTitle }}</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { FormInstance } from "node_modules/element-plus/es"
import { ElMessage, ElNotification } from "element-plus"
import { ref, reactive, getCurrentInstance } from "vue"
import { useRouter, useRoute } from "vue-router"
import FilterRouteList from '@/service/FilterRouteList'
const formSize = ref("large")
const loginForm = ref<FormInstance>()
// 解构出全局api接口
// @ts-ignore
const { proxy } = getCurrentInstance()
const api = proxy.$api
// 引入router
const router = useRouter()
const route = useRoute()
// 处理公共响应式数据
let data = reactive({
	isLogin: true,
	title: "账号登录",
	tabTitle: "注册账号",
	loginText: "登录",
	rules: {
		username: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
		account: [{ required: true, message: "账号信息不能为空！", trigger: "blur" }],
		password: [
			{ required: true, message: "密码不能为空！", trigger: "blur" },
			{
				min: 6,
				max: 16,
				message: "密码长度不能小于6个字符或大于16字符",
				trigger: "blur",
			},
		],
	},
})
// 账号信息/密码
const loginInfo = reactive({
	username: "",
	account: "18819310489",
	password: "123456",
})
// 登录/注册
const submitForm = async (formName: FormInstance | undefined) => {
	if (!formName) return
	// @ts-ignore
	await formName.validate(async (valid, fields) => {
		if (valid) {
			if (data.isLogin) {
				const { code, msg, data } = await api.Login(loginInfo)
				if (code !== 200) {
					return ElNotification({
						title: '失败',
						message: msg,
						type: 'error'
					})
				}
				ElNotification({
					title: '成功',
					message: msg,
					type: 'success'
				})
				localStorage.setItem("ACCESS_TOKEN", data.token)
				localStorage.setItem("USERINFO", JSON.stringify(data.userInfo))
				localStorage.setItem("MENUS", JSON.stringify(data.menus))
				new FilterRouteList(data.menus)
				router.push({
					name: "layui",
					query: {
						...route.query,
					},
				})
			} else {
				const { code, msg } = await api.Register(loginInfo)
				if (code !== 200) return ElMessage.error(msg)
				ElNotification({
					title: '成功',
					message: msg,
					type: 'success'
				})
				switchPage()
			}
		} else {
			console.log("error submit!", fields)
		}
	})
}
// 清空
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.resetFields()
}
// 切换登录/注册页面
// @ts-ignore
const switchPage = () => {
	data.isLogin = !data.isLogin
	loginInfo.username = ""
	loginInfo.account = ""
	loginInfo.password = ""
	if (data.isLogin) {
		data.title = "账号登录"
			; (data.tabTitle = "注册账号"), (data.loginText = "登录")
	} else {
		data.title = "账号注册"
			; (data.tabTitle = "返回登录"), (data.loginText = "注册")
	}
}
</script>
<style scoped lang="less" src="./index.less">

</style>
